<template>
	<div class="box" id="growth">
		<div class="weui-cells__title">学习情况
			<popup-radio :options="options1" v-model="option1"></popup-radio>
			<span class="right" @click="toScoreDetail">
				<x-icon type="ios-arrow-right" size="30"></x-icon>
			</span></div>
		<v-chart ref="demo" :data="data">
			<v-scale x field="周" />
			<v-scale y field="分数" />
			<v-bar series-field="name" adjust="stack" />
			<v-tooltip show-value-in-legend />
		</v-chart>

		<div class="weui-cells__title">生活情况
			<popup-radio :options="options2" v-model="option2"></popup-radio>
			<span class="right" @click="toScoreDetail">
				<x-icon type="ios-arrow-right" size="30"></x-icon>
			</span></div>
		<v-chart :data="dataB" prevent-default>
			<v-scale x :tick-count="3" />
			<v-tooltip :show-item-marker="false" show-x-value />
			<v-line />
		</v-chart>

		<div class="weui-cells__title">今日作业</div>
		<ul class="work">
			<li v-for="(val,i) in 6" @click="toWorkDetail">
				<div>
					<!-- <input class="check" type="checkbox"> -->
					<img src="../assets/record/complete.png" alt=""> <span>小生本</span> <img src="../assets/record/work.png" alt="">
				</div>
			</li>

		</ul>
		<p class="message" @click="toMessage"><img src="../assets/home/good.png" alt="">留言</p>

		<navBottom class="nav"></navBottom>

	</div>
</template>
<script>
	import {
		VChart,
		VLine,
		VArea,
		VTooltip,
		VLegend,
		VBar,
		XButton,
		VScale,
		PopupRadio
	} from 'vux'
	import NavBottom from '@/components/navBottom'


	export default {
		components: {
			NavBottom,
			VChart,
			VLine,
			VArea,
			VTooltip,
			VLegend,
			VBar,
			XButton,
			VScale,
			PopupRadio
		},
		data() {
			return {
				option1: '按月份',
				options1: ['按周', '按月份', '按季度', '按年'],
				option2: '按周',
				options2: ['按周', '按月份', '按季度', '按年'],
				data: [{
						name: 'learn',
						周: '星期一',
						分数: 18
					},
					{
						name: 'learn',
						周: '星期二.',
						分数: 98
					},
					{
						name: 'learn',
						周: '星期三.',
						分数: 39
					},
					{
						name: 'learn',
						周: '星期四.',
						分数: 81
					},
					{
						name: 'learn',
						周: '星期五.',
						分数: 47
					},
					{
						name: 'learn',
						周: '星期六.',
						分数: 20
					},
					{
						name: 'learn',
						周: '星期天.',
						分数: 24
					},
				],
				dataB: [{
						date: '星期一',
						value: 90
					},
					{
						date: '星期二',
						value: 87
					},
					{
						date: '星期三',
						value: 60
					},
					{
						date: '星期四',
						value: 86
					},
					{
						date: '星期五',
						value: 73
					},
					{
						date: '星期六',
						value: 85
					},
					{
						date: '星期天',
						value: 73
					},
				],

			}
		},
		created() {

		},
		mounted() {


		},
		methods: {
			toScoreDetail() { //可封装
				this.$router.push('/scoreDetail')
			},
			toWorkDetail() {
				this.$router.push('/workDetail')
			},
			toMessage(){
				this.$router.push('/message')
			}
		},


	}
</script>

<style lang="less" scoped="scoped">
	.box {
		width: 100%;
		overflow-x: hidden;
		padding-bottom: 50px;

		.weui-cells__title {
			position: relative;
			margin-top: 0.77em;
			margin-bottom: 0.3em;
			padding-left: 15px;
			padding-right: 15px;
			color: #999999;
			font-size: 14px;

			.right {
				position: absolute;
				right: 5%;
				fill: #999;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.work {
			list-style: none;
			overflow: hidden;
			li {
				width: 50%;
				float: left;
				background: #FFF;

				div {
					padding: 15px;
					display: flex;
					align-items: center;

					span {
						padding: 0 5px;
						color: #666;
					}

					img {
						width: 18px;
						height: 18px;
						// vertical-align: middle;
					}
				}

			}
		}

		.message {
			font-size: 14px;
			margin: 15px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #999;
			img{
				
				width: 15px;
				height: 15px;
				margin: 0 5px;
			}
			}
	}
</style>
